<template>
  <div>
    <div @keyup.enter="getData()">
      <el-form :inline="true">
        <el-form-item>
          <el-input v-model="params.customer_name" placeholder="项目名称查询" clearable></el-input>
        </el-form-item>
        <el-form-item>
          <el-input
            v-model="params.corp_name"
            placeholder="负责人查询"
            :clearable="true"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <select-address
            v-model="params.address_code"
            clearable
            placeholder="地址查询"
            :auto-top="true"
            @change="getData()"
          ></select-address>
        </el-form-item>
        <el-form-item>
          <el-button @click="getData()">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <c-table
      border
      v-loading="loading"
      :stripe="false"
      :columns="tableColumns"
      :data="tableData"
      :height="dialogHeight"
    ></c-table>

    <div class="query-pagination">
      <div></div>
      <el-pagination
        layout="total, prev, pager, next, jumper"
        :current-page.sync="params.index"
        :page-size="params.size"
        :total="totalCount"
        @current-change="getData"
      ></el-pagination>
    </div>

    <!-- <attach-cmpt :visible.sync="attachVisible"
                 :customer-related-id="attachRelatedId"></attach-cmpt> -->

    <el-dialog
      :visible.sync="reportVisible"
      :close-on-click-modal="false"
      append-to-body
      top="30px"
      width="80%"
    >
      <el-tabs v-model="active">
        <el-tab-pane label="签约登记" name="first">
          <contract-registr
            :query-id="relatedData.customer_related_id"
            view-mode
          ></contract-registr>
        </el-tab-pane>
        <el-tab-pane label="合同审批表">
          <contract-approve
            v-if="+relatedData.gua_type === 2"
            :query-id="relatedData.customer_related_id"
            view-mode
          ></contract-approve>
          <contract-approve-union
            v-else-if="+relatedData.gua_type === 4"
            :query-id="relatedData.customer_related_id"
            :process-status="relatedData.process_status"
            view-mode
          ></contract-approve-union>
        </el-tab-pane>
        <el-tab-pane label="合同附件" name="contract">
          <contract-guard-view :query-id="relatedData.customer_related_id"></contract-guard-view>
        </el-tab-pane>
        <el-tab-pane label="附件">
          <attach-view
            :query-id="relatedData.customer_related_id"
            :visible="reportVisible"
          ></attach-view>
        </el-tab-pane>
      </el-tabs>
    </el-dialog>

    <contract-registr-dialog
      :visible.sync="editVisible"
      @success="handleSuccess()"
      :query-id="editId"
    ></contract-registr-dialog>
  </div>
</template>

<script>
import taskTableMixin from '@/credit/mixin/task/taskTable'
import SelectAddress from '@/components/select/SelectAddress'
import { enumGuatype } from '@/credit/plugins/enumTown'
// import AttachCmpt from '@/credit/views/city/program/Attach'
import ContractGuardView from '@/credit/views/county/unionProvince/components/ContractGuardView'
import AttachView from '@/credit/components/AttachView'
import ContractApprove from '@/credit/views/city/self/components/contractApprove/Main'
import ContractRegistrDialog from '@/credit/views/city/self/components/contractRegistr/ContractRegistrDialog'
import ContractRegistr from '@/credit/views/city/self/components/contractRegistr/ContractRegistr'
import ContractApproveUnion from '@/credit/views/county/unionProvince/components/contractApprove/Main'
export default {
  components: {
    SelectAddress,
    // AttachCmpt,
    ContractGuardView,
    AttachView,
    ContractApprove,
    ContractRegistr,
    ContractRegistrDialog,
    ContractApproveUnion,
  },
  data() {
    return {
      params: {
        index: 1,
        size: 10,
        subKey: 'contract_approval.customer_related_id',
      },
      totalCount: 0,
      tableData: [],
      tableColumns: [
        { attrs: { label: '主体名称', prop: 'customer_name', minWidth: 135 } },
        { attrs: { label: '地址', prop: 'address', minWidth: 135 } },
        { attrs: { label: '负责人', prop: 'corp_name', align: 'center' } },
        { attrs: { label: '联系电话', prop: 'mobile_no', align: 'center', width: 110 } },
        { attrs: { label: '业务类型', prop: 'project_type', align: 'center' } },
        {
          attrs: { label: '操作', align: 'center', width: 110 },
          operations: [
            {
              content: '操作',
              icon: 'fa fa-gavel',
              event: this.handleEdit,
              attrs: { class: 'p-1' },
              ifRender: row => row.editable,
            },
            // { content: '附件', icon: 'fa fa-clipboard', event: this.handleAttach, attrs: { class: 'p-1' } },
            {
              content: '查看',
              icon: 'fa fa-search',
              event: this.handleView,
              attrs: { class: 'p-1' },
            },
          ],
        },
      ],
      attachVisible: false,
      attachRelatedId: '',
      reportVisible: false,
      relatedData: {},
      active: 'first',
      editVisible: false,
      editId: '',
    }
  },
  mixins: [taskTableMixin],
  props: {
    visible: Boolean,
  },
  computed: {
    order() {
      return { create_time: 'desc' }
      // if (+this.status === 0) {
      //   return { create_time: 'desc' }
      // } else {
      //   return {

      //   }
      // }
    },
  },
  created() {},
  methods: {
    dataAdapter(item) {
      item.project_type = enumGuatype[+item.gua_type] || '-'
      const approval = item.contract_approval?.[0] || {}
      item.editable = +approval.is_online_sign === 0
      return item
    },
    handleEdit(row = {}) {
      this.editId = row.customer_related_id
      this.editVisible = true
    },
    handleView(row = {}) {
      this.active = 'first'
      this.relatedData = row
      this.reportVisible = true
    },
    handleAttach(row = {}) {
      this.attachVisible = true
      this.attachRelatedId = row.customer_related_id
    },
    handleSuccess() {
      this.$store.dispatch('getMyTaskCount')
      this.$emit('success', true)
    },
  },
}
</script>
<style lang="scss" scoped></style>
